<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
  <div class="home">
    <div class="JCSJ_card">
      <div class="JCSJ_title">
        <div class="big_title">监测数据</div>
      </div>
      <div class="JCSJ_content">
        <div class="content_top">
          <div class="btns">
            <div class="btn_item"
              :style="activeBgi == item.id ? `background: url('${jh}') no-repeat; color: #40e5f0` : ''"
              v-for="(item, index) in topBtn" @click="getActiveBGI(item.id, item.value)">{{ item.name
              }}</div>
          </div>
          <img src="../assets/JCSJ_right_icon.png" alt="">
        </div>
        <component :is="yemianShow"></component>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import * as echarts from "echarts";
import jh from "../assets/jh.png";
import DianLiuDianYa from '../components/DianLiuDianYa.vue'
import DongZuoCiShu from '../components/DongZuoCiShu.vue'
import DaYaCiShu from '../components/DaYaCiShu.vue'
export default {
  data() {
    return {
      // 控制页面展示谁的变量
      yemianShow: 'DianLiuDianYa',
      // 打压次数的数据
      jcsjData: [
        {
          name: "A相",
          value_dianLIu: "139.748A",
          value_IMu: "922 299 kv",
          value_IIMu: "20922 299 kv"
        },
        {
          name: "B相",
          value_dianLIu: "139.748A",
          value_IMu: "922 299 kv",
          value_IIMu: "20922 299 kv"
        },
        {
          name: "C相",
          value_dianLIu: "139.748A",
          value_IMu: "922 299 kv",
          value_IIMu: "20922 299 kv"
        },
        {
          name: "A相",
          value_dianLIu: "139.748A",
          value_IMu: "922 299 kv",
          value_IIMu: "20922 299 kv"
        },
      ],
      activeBgi: 1,
      jh,
      // 按钮
      topBtn: [
        {
          id: 1,
          name: "电流电压",
          value: 'DianLiuDianYa'
        },
        {
          id: 2,
          name: "动作次数",
          value: 'DongZuoCiShu'
        },
        {
          id: 3,
          name: "打压次数",
          value: 'DaYaCiShu'
        },
        {
          id: 4,
          name: "气体状态"
        },
        {
          id: 5,
          name: "局放状态"
        },
        {
          id: 6,
          name: "机械特性"
        },
        {
          id: 7,
          name: "环境数据"
        },
        {
          id: 8,
          name: "试验数据"
        },
        {
          id: 9,
          name: "其他数据"
        }
      ],
      option1: [
        {
          value: "选项1",
          label: "数据1"
        },
        {
          value: "选项2",
          label: "数据2"
        },
        {
          value: "选项3",
          label: "数据3"
        },
        {
          value: "选项4",
          label: "数据4"
        },
        {
          value: "选项5",
          label: "数据5"
        }
      ],
      value1: "",

    };
  },
  name: "Home",
  components: {
    DongZuoCiShu,
    DaYaCiShu,
    DianLiuDianYa
  },
  mounted() {
    this.zx_data();
  },
  methods: {
    getActiveBGI(i, YS) {
      this.activeBgi = i;
      this.yemianShow = YS
      // console.log(this.activeBgi)
      // console.log(i)
    },
    // 折线图
    zx_data() {
      console.log(echarts);
      var myChart = echarts.init(document.getElementById("tu"));
      myChart.resize({
        width: 594,
        height: 260
      });

      // 配置折线图选项
      var option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          textStyle: {
            color: "#fff"
          },
          left: 50,
          top: 16, // 调整图例整体靠右的距离
          itemGap: 20, // 设置图例项之间的间距
          data: ["A相", "B相", "C相"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#fff",
            interval: 0,
            rotate: 45
          },
          data: [
            "2023.10.01",
            "2023.10.02",
            "2023.10.03",
            "2023.10.04",
            "2023.10.05",
            "2023.10.06",
            "2023.10.07",
            "2023.10.08",
            "2023.10.09",
            "2023.10.10"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "A相",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210, 201, 154, 190]
          },

          {
            name: "B相",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310, 190, 330, 410]
          },

          {
            name: "C相",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410, 90, 230, 210]
          }
        ]
      };

      // 使用配置项绘制饼图
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home {
  width: 608px;
  height: 592px;
  // margin: 0 auto;
}

.JCSJ_card {
  width: 100%;
  height: 592px;
  position: relative;
  width: 100%;
  background: url("../assets/JCSJ-BG.png") no-repeat;
  // background-color: #101d29;
  // margin-bottom: 10px;

  // 标题
  .JCSJ_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 大标题
  .big_title {
    width: 144px;
    height: 40px;
    line-height: 38px;
    font-size: 20px;
    font-weight: bold;
    font-family: MicrosoftYaHei-Bold;
    line-height: 38px;
    color: #e8e8e8;
    padding-left: 56px;
    text-align: center;
    flex: 1;
    /* 占据左边的剩余空间 */
    text-align: left;
  }



  .JCSJ_content {
    width: 594px;
    height: 540px;
    // background-color: pink;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 5px;
    margin: 0 auto;

    .content_top {
      position: relative;
      width: 556px;
      height: 27px;
      // background-color: #fff;
      margin-top: 12px;
      margin-bottom: 10px;

      // 按钮的容器
      .btns {
        display: flex;
        width: 535px;
        height: 27px;
        // background-color: aqua;
        text-align: center;
        overflow-x: auto;
        white-space: nowrap;
        margin-left: 3px;

        // 每一个按钮
        .btn_item {
          width: 95px;
          height: 27px;
          line-height: 27px;
          background-color: pink;
          color: #fff;
          background: url('../assets/mr.png') no-repeat;
          flex-shrink: 0;
          cursor: pointer;
          margin-right: 10px;
        }

        // 整个滚动条
        &::-webkit-scrollbar {
          -webkit-appearance: none;
          width: 0;
          height: 0;
        }

        // 滚动条轨道
        &::-webkit-scrollbar-track {
          // background-color: pink;
          border-radius: 0;
        }

        // 滚动条上的滑道
        &::-webkit-scrollbar-thumb {
          cursor: pointer;
          border-radius: 0px;
          // background-image: url("../assets/JCSJ_xialatiao.png");
          // background-color: skyblue;
          transition: color 0.2s ease;
        }



      }

      // 右箭头的icon
      img {
        position: absolute;
        width: 9px;
        height: 15px;
        top: 4px;
        right: 0;
        cursor: pointer;
      }


    }
  }

  // 下半部分
  .content_bottom {
    width: 594px;
    height: 446px;

    // 间隔
    .jg {
      width: 210px;
      height: 30px;
      display: flex;
      // background-color: purple;

      .txt {
        width: 72px;
        height: 30px;
        color: #fff;
        // text-align: end;
        margin-top: 5px;
      }

      ::v-deep .el-select .el-input__inner {
        height: 30px;
        background-color: #202f3e;
        border-radius: 2px;
        color: #fff;
        border: solid 1px #40486a;
        padding: 0 6px;
      }

      ::v-deep .el-input__suffix {
        margin-top: 4px;
      }
    }

    // background-color: pink;
    #tu {
      width: 594px;
      height: 225px;
    }
  }
}

.table_content {
  width: 556px;
  height: 173px;
  margin-top: 10px;
  // height: 200px;
}

.JCSJ_table2 {
  width: 100%;
  height: 130px;
  font-size: 15px;
  font-weight: bold;
  color: #c6d3ec;
  border: 1px solid #343d59;
  // 合并相邻的边框线
  border-collapse: collapse;

  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
  }

  tr {
    display: table;
    box-sizing: border-box;
    table-layout: fixed;
    height: 40px;
    width: 100%;

    // 鼠标移动到tr上时改变颜色
    &:hover {
      background-color: #424c6d;
    }
  }

  td {
    width: 38px;
    border: 1px solid #343d59;
  }

  thead {
    background-color: #101d29;
    height: 38px;

    .tab_header {
      // height: 100%;
      background-color: #1d2638;
    }
  }

  // // 纵向内容超出现滚动条
  tbody {
    display: block;
    height: 120px;
    // 宽度计算：100%+滚动条的宽度，避免和表头没对齐
    width: calc(100% + 4px);
    -webkit-overflow-scrolling: touch;
    // 当数据少于等于三条时，滚动条会消失
    overflow-y: scroll;
    padding-right: 5px;
    cursor: pointer;

    // 整个滚动条
    &::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 4px;
      height: 20px;
    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
      // background-color: pink;
      border-radius: 0;
    }

    // 滚动条上的滑道
    &::-webkit-scrollbar-thumb {
      cursor: pointer;
      border-radius: 0px;
      background-image: url("../assets/JCSJ_xialatiao.png");
      // background-color: skyblue;
      transition: color 0.2s ease;
    }
  }
}

table tr:nth-child(odd) {
  background-color: #202f3e;
}

table tr:nth-child(even) {
  background-color: #172533;
}
</style>